<template>
  <div class="container">
    <!-- 商品的爸爸标题 -->
    <div class="twonav_title">{{item.anchor_point}}</div>
    <div class="twonav_container">
      <div class="twonav_item" v-for="(item,index) in item.commodity_list" :key="index">
        <!-- 商品图片 -->
        <img :src="item.comm_image" alt />
        <div>
          <!-- 商品标题 -->
          <div class="twocart_title">{{item.comm_title}}</div>
          <!-- 商品价格 -->
          <div class="twocart_price">￥{{item.comm_price}}</div>
          <!-- 加购物车 -->
          <span class="twocart_span" @click="addCart(item)">+</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: Object,
    index: Number
  },
  methods: {
    // 将item添加至购物车
    addCart(item){
      this.$store.dispatch("GET_CART_DATA",item);
    }
  },
};
</script>

<style scoped>
.container {
  width: 100%;
}
.twonav_container {
  width: 100%;
}
.twonav_item {
  width: 100%;
  height: 100px;
  margin-top: 10px;
  margin-left: 10px;
  display: flex;
}
.twonav_item img {
  width: 35%;
  height: 90px;
  margin-top: 5px;
  margin-left: 10px;
}
.twonav_item div {
  width: 50%;
  font-size: 16px;
}
.twonav_item div .twocart_title {
  width: 100%;
  text-indent: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  margin-top: 10px;
}
.twonav_item div .twocart_price {
  text-indent: 10px;
  font-size: 20px;
  color: red;
  margin-top: 10px;
}
.twocart_span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #eeeeee;
  line-height: 20px;
  text-align: center;
  float: right;
}
.twonav_title {
  width: 100%;
  height: 40px;
  border: 1px solid #eeeeee;
  line-height: 40px;
  font-size: 20px;
  text-indent: 20px;
}
</style>